<template>
	<div id="tmpl">
		<!--图片分类-->
		<div id="cate">
			<ul v-bind:style="{width:ulWidth+'px'}">
				<li>全部</li>
				<li v-for="item in list" @click="getimglist(item.id)">{{item.title}}</li>
			</ul>
		</div>
		<!--图片的列表-->
		<div id="imglist">
			<ul>
				<li v-for="item in imglist">
					<router-link v-bind="{to:'/photo/photoinfo/'+item.id}">
						<img v-lazy="item.img_url">
						<div id="desc">
							<h5 v-text="item.title"></h5>
							<p v-text="item.zhaiyao"></p>
						</div>
					</router-link>
				</li>
			</ul>
		</div>
	</div>
</template>

<script>
	import common from "../../kits/common.js";
	import { Toast } from 'mint-ui';
	export default {
		data(){
			return {
				list:[],
				ulWidth:320,
				imglist:[]
			}
		},
		methods:{
			getcates(){
				var url = common.apimain+'/api/getimgcategory';
				this.$http.get(url).then(function(res){
					if(res.body.status!=0){
						Toast(res.body.message);
						return;
					}
					this.list=res.body.message;
					var w = 76;
					this.ulWidth=this.list.length*w;
					console.log(this.ulWidth)
					
				})
			},
			getimglist(cateid){
				var url = common.apimain+"/api/getimages/"+cateid;
				this.$http.get(url).then(function(res){
					if(res.body.status!=0){
						Toast(res.body.message);
						return;
					};
					this.imglist=res.body.message;
				})
			}
		},
		created(){
			this.getcates();
			this.getimglist(0);
		}
	}
</script>

<style>
	#cate {
		width:375px;
		max-width: 375px;
		overflow-x: auto;
	}
	#cate ul {
		margin: 0px;
		padding-left: 10px;
	/*	width: 1000px;*/
	}
	#cate li {
		list-style: none;
		display: inline-block;
		font-size: 16px;
		color: #0094ff;
		cursor: pointer;
		padding-left: 6px;
	}
	#imglist ul{
		padding-left: 0px;
	}
	#imglist li {
		list-style: none;
		position: relative;
	}
	#imglist img {
		width: 100%;
		height: 300px;
	}
	#desc {
		position: absolute;
		background-color: rgba(0,0,0,0.2);
		width: 100%;
		bottom: 2px;
		left: 0px;
	}
	#desc h5 {
		color: #ffffff;
		font-weight: bold;
	}
	
	#desc p {
		color: #fff;
	}
	
	image[lazy=loading] {
		width: 40px;
		height: 300px;
		margin: auto;
	}
</style>
